<template>
  <div class="interview-container">
    <van-nav-bar
      right-text="答题卡"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #title>
        <div>
          面试题<span class="count">{{ topic.length }}</span>
        </div>
      </template>
    </van-nav-bar>
    <van-popup v-model="popShow" position="bottom" :style="{ height: '100%' }">
      <template>
        <van-nav-bar title="答题卡">
          <template #right>
            <div>
              <span class="redfont">{{ numred() + 1 }}</span
              >/{{ topic.length }}题
            </div>
          </template>
        </van-nav-bar>
        <div class="quepup">共{{ topic.length }}题</div>
        <ul class="list">
          <li
            v-for="(item, index) in topic"
            :key="item.id"
            @click="liClick(index)"
            :class="{ current: index == numred() }"
          >
            {{ index + 1 }}
          </li>
        </ul>
      </template>
    </van-popup>
    <div class="content">
      <div class="subject">
        【{{ typeObj[titleDet.type] }}】{{ titleDet.title }}
      </div>
      <div class="tags">
        <div class="tag" v-for="(item, index) in titleDet.tag" :key="index">
          {{ item }}
        </div>
      </div>
      <div class="item" v-if="titleDet.type == 1">
        <div
          class="items"
          v-for="(item, index) in titleDet.option"
          :key="index"
          :class="{
            active:
              str[index] == singleAnswer || multipleAnswer.includes(str[index]),
            isright: str[index] == details.singleAnswer,
            iserror:
              index == currtentIndex &&
              details.singleAnswer &&
              str[index] != details.singleAnswer,
            notclick: notclick
          }"
          @click="itemsClick(index)"
        >
          {{ str[index] }}.{{ item }}
        </div>
      </div>
      <div class="item" v-else>
        <div
          class="items"
          v-for="(item, index) in titleDet.option"
          :key="index"
          :class="{
            active:
              str[index] == singleAnswer || multipleAnswer.includes(str[index]),
            isright:
              details.multipleAnswer &&
              details.multipleAnswer.includes(str[index]),
            iserror:
              details.multipleAnswer &&
              indexArr.includes(index) &&
              !details.multipleAnswer.includes(str[index]),
            notclick: notclick
          }"
          @click="itemsClick(index)"
        >
          {{ str[index] }}.{{ item }}
        </div>
      </div>
    </div>
    <div class="answer" v-show="details.singleAnswer || details.multipleAnswer">
      <div class="title">答案解析</div>
      <div class="right" v-if="details.singleAnswer">
        正确答案：{{ details.singleAnswer }}
      </div>
      <div class="right" v-else>
        正确答案：<span
          v-for="(item, index) in details.multipleAnswer"
          :key="index"
          >{{ item }}</span
        >
      </div>
      <div class="other">
        <div>难度：{{ nandu() }}</div>
        <div>提交次数：{{ details.submitNum }}</div>
        <div>正确次数：{{ details.correctNum }}</div>
      </div>
      <div class="jiexin">{{ details.answerAnalysis }}</div>
    </div>
    <div class="footer">
      <div class="one">
        <van-icon name="star-o" />
        <span>收藏</span>
      </div>
      <div class="two">
        <van-icon name="edit" />
        <span>反馈</span>
      </div>
      <div class="three">
        <span>{{ numred() + 1 }}</span>
        /{{ topic.length }}
      </div>
      <div class="four" v-if="btnshow">
        <van-button type="danger" @click="submit" :disabled="disabled"
          >提交</van-button
        >
      </div>
      <div class="four" v-else>
        <van-button type="info" @click="nextClick">下一题</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getInterviewApi, getParticularsApi, submitApi } from './index.js'
export default {
  name: 'interview',
  data () {
    return {
      btnshow: true,
      disabled: true,
      notclick: false,
      currtentIndex: -1,
      details: {},
      singleAnswer: '',
      multipleAnswer: [],
      topic: [],
      popShow: false,
      topicid: '',
      titleDet: {},
      typeObj: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      diffObj: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      str: 'ABCDEFGH',
      indexArr:[]
    }
  },
  computed: {
    numred () {
      return function () {
        let num = ''
        this.topic.forEach((item, index) => {
          if (item.id == this.topicid) {
            num = index
          }
        })
        return num
      }
    },
    nandu () {
      return function () {
        let res = this.details.difficulty
        return this.diffObj[res]
      }
    }
  },
  methods: {
    nextClick () {
      this.singleAnswer = ''
      this.multipleAnswer = []
      this.details = {}
      this.notclick = false
      this.btnshow = true
      this.indexArr=[]
      const id = this.topic[this.numred() + 1].id
      this.getParticulars(id)
      this.topicid = this.topic[this.numred() + 1].id
    },
    async submit () {
      const res = await submitApi({
        id: this.topicid,
        singleAnswer: this.singleAnswer,
        multipleAnswer: this.multipleAnswer
      })
      this.details = res.data.data
      this.notclick = true
      this.btnshow = false
      console.log(res)
    },
    itemsClick (index) {
      this.disabled = false
      if (this.typeObj[this.titleDet.type] == '单选') {
        this.currtentIndex = index
        this.singleAnswer = this.str[index]
      } else if (this.typeObj[this.titleDet.type] == '多选') {
        if (this.multipleAnswer.indexOf(this.str[index]) == -1) {
          this.multipleAnswer.push(this.str[index])
          this.indexArr.push(index)
        } else {
          let a = this.multipleAnswer.indexOf(this.str[index])
          this.multipleAnswer.splice(a, 1)
          let indexstr = this.indexArr.indexOf(index)
          this.indexArr.splice(indexstr,1)
        }
      }
    },
    onClickLeft () {
      this.$dialog
        .confirm({
          title: '标题',
          message: '是否退出答案'
        })
        .then(() => {
          this.$router.go(-1)
        })
        .catch(() => {
          // on cancel
        })
    },
    onClickRight () {
      this.popShow = true
    },
    liClick (index) {
      this.singleAnswer = ''
      this.multipleAnswer = []
      this.indexArr=[]
      this.details = {}
      this.notclick = false
      this.popShow = false
      this.btnshow = true
      this.disabled =true
      this.topicid = this.topic[index].id
      this.getParticulars(this.topic[index].id)
    },
    async getInterview () {
      const res = await getInterviewApi(
        this.$route.params.id,
        this.$route.params.city
      )
      this.topic = res.data.data
      this.topicid = res.data.data[0].id
      this.getParticulars(res.data.data[0].id)
    },
    async getParticulars (id) {
      const res = await getParticularsApi(id)
      this.titleDet = res.data.data
    }
  },
  created () {
    this.getInterview()
  }
}
</script>

<style lang="less">
.interview-container {
  margin-bottom: 100px;

  .notclick {
    pointer-events: none;
  }
  .iserror {
    background: #ffefea url('~@/assets/icon_cuowu.png') no-repeat 97%;
    background-size: 48px 48px;
    position: relative;
    color: red;
  }
  .isright {
    background: #ddfad9 url('~@/assets/icon_zhengque.png') no-repeat 97%;
    background-size: 48px 48px;
    position: relative;
    color: #000;
  }
  .redfont {
    color: #d12d3e;
  }
  .active {
    border: 2px solid #999 !important;
  }
  .count {
    font-size: 12px;
    margin-left: 4px;
    position: relative;
    top: -10px;
  }
  .van-icon,
  .van-nav-bar__text {
    color: #000;
  }
  .quepup {
    color: #aaa;
    height: 80px;
    line-height: 80px;
    font-size: 26px;
    background-color: #f7f4f5;
    padding: 0px 40px;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    padding: 40px;
    li {
      width: 60px;
      height: 60px;
      border: 2px solid #ccc;
      border-radius: 50%;
      color: #ccc;
      text-align: center;
      line-height: 60px;
      font-size: 26px;
      margin-right: 30px;
      margin-bottom: 30px;
    }
    .current {
      border: 2px solid #666;
      color: #666;
    }
  }
  .content {
    padding: 40px 30px;
    .subject {
      margin-top: 20px;
      font-size: 32px;
    }
    .tags {
      display: flex;
      flex-wrap: wrap;
      .tag {
        font-size: 28px;
        background-color: #f7f4f5;
        color: #bbb;
        padding: 8px 12px;
        border-radius: 10px;
        margin: 20px 20px 0 0;
      }
    }
    .item {
      .items {
        border: 2px solid #eee;
        font-size: 32px;
        padding: 30px;
        margin-top: 30px;
      }
    }
  }
  .answer {
    padding: 30px;
    padding-top: 80px;
    .title {
      font-weight: 700;
      font-size: 36px;
    }
    .right {
      font-size: 32px;
      color: skyblue;
      padding: 40px 0px;
    }
    .other {
      display: flex;
      justify-content: space-between;
      font-size: 24px;
      background-color: #f7f4f5;
      padding: 20px;
      margin-bottom: 40px;
    }
    .jiexin {
      font-size: 28px;
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    align-items: center;
    background-color: #fff;
    .one,
    .two {
      display: flex;
      flex: 1;
      flex-direction: column;
      font-size: 24px;
      justify-content: center;
      align-items: center;
      .van-icon {
        font-size: 44px;
      }
    }
    .three {
      flex: 2;
      font-size: 24px;
      text-align: center;
      span {
        color: pink;
        font-size: 36px;
      }
    }
    .four {
      flex: 2;
      text-align: center;
      .van-button--disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }
    }
  }
}
</style>
